<template>
    <div class="vol_meeting">
      <div class="vol_meeting_list">
        <van-list
          v-if="params.list.length || !params.loading"
          v-model:loading="params.loading"
          :finished="params.list.length >= params.total"
          @load="loadMore"
        >
          <van-empty v-if="!params.list.length" description="暂无参会者" />
          <div
            class="mb-3"
            v-for="item in params.list"
            :key="item.id"
            :item="item"
          >
            <base-card :title="item.topic">
              <div class="card-container">
                <van-cell title="用户头像">{{ item.meetingCode }}</van-cell>
                <van-cell title="访问时长">{{ item.shapeDesc }}</van-cell>
                <van-cell title="首次访问时间">{{ item.stateDesc }}</van-cell>
                <van-cell title="最后在线时间">{{ item.startTime }}</van-cell>
                <van-cell title="访问来源">{{ item.meetingCode }}</van-cell>
                <van-cell title="访问设备">{{ item.shapeDesc }}</van-cell>
                <van-cell title="观看类型">{{ item.stateDesc }}</van-cell>
                <van-cell title="城市">{{ item.startTime }}</van-cell>
              </div>
            </base-card>
          </div>
        </van-list>
      </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, reactive } from "vue";
  import { inject } from "vue";
  import { useRouter } from "vue-router";
  
  const router = useRouter();
  const api = inject("api");
  const params = reactive({
    loading: true,
    page: 1,
    limit: 10,
    list: [],
    meetingName: "",
    total: 0,
  });
  
  const load = async () => {
    try {
      params.loading = true;
      const res = await api.meetingList({
        limit: params.limit,
        page: params.page,
        topic: params.meetingName,
      });
  
      params.loading = false;
  
      if (!res.code) {
        params.total = res.data.total;
        if (params.page == 1) {
          params.list = res.data.list;
        } else {
          params.list = [...params.list, ...res.data.list];
        }
      }
    } catch (err) {
      params.loading = false;
    }
  };
  
  function loadMore() {
    if (params.list.length < params.total) {
      params.page++;
      load();
    }
  }
  
  function init() {
    params.page = 1;
    load();
  }
  function clickSearch(val) {
    params.meetingName = val;
    init();
  }
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped>
  .vol_meeting {
    padding-bottom: 200px;
  }
  .apply_meeting_btn {
    position: fixed;
    bottom: 100px;
    width: 100%;
    box-sizing: border-box;
  }
  .apply_meeting_btn_main {
    width: 50%;
    margin: 0 auto;
  }
  </style>
  